<template>
  <div class="theme">
    <div class="theme-tab">
      <el-tabs v-model="activeName" type="border-card">
        <el-tab-pane label="组件" name="1">
          <zhujian/>
        </el-tab-pane>
        <el-tab-pane label="配色方案" name="2">
          <color/>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!--<el-divider>下方为控制页面</el-divider>-->
    <div class="iframe-box">
      <iframe
        id="iframe"
        ref="iframe"
        marginheight="0"
        marginwidth="0"
        :src="src"
        scrolling="no"
        width="100%"
        height="100%"
        align="top"
        frameborder="0"></iframe>
    </div>
  </div>

  <!-- 弹框 -->
</template>

<script>
  import zhujian from '../setsite/theme/zujian'
  import color from '../setsite/theme/color'
  import {getTenantId} from '@/utils/auth';

  export default {
    components: {
      zhujian,
      color
    },
    data() {
      return {
        activeName: '1',
        src: "http://rhyun.top/eduxcloud/eduIndexAction!goIndex.action?tenantId=" + getTenantId()
      }
    },
    methods: {}
  }

</script>

<style lang="scss">
  .theme {
    .top-button {
      width: 100%;
      height: 44px;
      line-height: 44px;
      background-color: #e7e9ed;
      padding-top: 4px;
      padding-right: 20px;
    }

    .iframe-box {
      z-index: 1024;
      position: relative;
      height: 5500px;
    }

    .iframe-box:after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
    }

    .theme-tab {
      position: relative;
      width: 1150px;
      margin: auto;
      margin-top: 30px;

      .el-tabs--border-card > .el-tabs__content {
        padding: 0;
      }

      .button {
        position: absolute;
        right: 5px;
        top: 0;
        z-index: 100;
        margin-top: 4px;
      }
    }
  }
</style>
